<template>
  <div class="level-info">
    <div class="level-row">
      <span class="level-text">Lv.{{ level }}</span>
      <span class="realm-text">{{ realmName }}</span>
    </div>
    <div class="realm-desc" v-if="realmDesc">{{ realmDesc }}</div>
    <div class="exp-area">
      <div class="exp-info">
        <span class="exp-label">经验值</span>
        <span class="exp-value">{{ exp }}/{{ needExp }}</span>
      </div>
      <div class="exp-progress">
        <div class="exp-bar">
          <div class="exp-fill" :style="{ width: expPercent + '%' }"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'UserLevelInfo',
  computed: {
    ...mapGetters('user', ['realmName', 'realmDesc', 'level', 'exp', 'needExp', 'expPercent'])
  }
}
</script>

<style scoped>
/* ========== 武侠风格用户等级信息 ========== */
.level-info { 
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
  font-family: "STSong", "Noto Serif SC", serif;
}

.level-row { 
  display: flex; 
  align-items: baseline; 
  gap: 10px; 
}

.level-text { 
  font-weight: bold; 
  color: #4a3c2a; 
  font-size: 16px;
  letter-spacing: 0.5px;
}

.realm-text { 
  color: #8b6f47; 
  font-weight: 600;
  font-size: 13px;
}

.realm-desc { 
  color: #6b4f3b; 
  font-size: 12px; 
  font-weight: 600;
  letter-spacing: 0.3px;
}

.exp-area { 
  display: flex; 
  flex-direction: column; 
  gap: 6px;
  padding: 8px;
  background: rgba(139, 111, 71, 0.05);
  border-radius: 8px;
  border: 1px solid #d8c7a3;
}

.exp-info { 
  display: flex; 
  align-items: center; 
  justify-content: space-between;
}

.exp-label { 
  font-size: 12px; 
  color: #6b4f3b; 
  font-weight: 600;
}

.exp-value { 
  font-size: 12px; 
  color: #4a3c2a; 
  font-weight: 700;
}

.exp-progress { 
  width: 100%; 
}

.exp-bar { 
  width: 100%; 
  height: 10px; 
  background: rgba(139, 111, 71, 0.15); 
  border-radius: 5px; 
  overflow: hidden;
  border: 1px solid #d8c7a3;
}

.exp-fill { 
  height: 100%; 
  background: linear-gradient(90deg, #d4af37 0%, #ffd700 100%); 
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
  transition: width 0.3s ease;
}

@media (max-width: 480px) { 
  .exp-bar { height: 8px; } 
  .level-text { font-size: 14px; }
  .realm-text { font-size: 12px; }
}
</style>